<template>
  <div class="search-bar">
    <!-- 输入框 -->
    <input
      type="text"
      placeholder="输入内容..."
      class="search-bar-input"
      v-model="textValueaa"
    />
    <button class="search-bar-button" @click="identification">搜 索</button>
  </div>
  
  <div class="search-bar2">
    <HZ-Forecast05 ref="aaa" id="aaa"></HZ-Forecast05>
  </div>
</template>


<script setup lang="ts" name="HZForecast01">
import { onMounted } from "vue";
import * as bigApi from "/@api/hz-bigscreen-api";

const textValueaa = ref(null);

onMounted(() => {});

const aaa = ref(null)

const identification = async () => {
  aaa.value.refreshCharts(textValueaa.value)
};
</script>

<style scoped>
.search-bar {
  width: 100%;
  height: 7%;
}
.search-bar2 {
  width: 100%;
  height: 57%;
  margin-top: 1%;
}

.search-bar-input {
  padding-left: 10px;
  width: 60%;
  height: 98%;
  margin: 1%;
  border-radius: 8px;
  border: 1px solid #ddd;
}

button {
  width: 30%;
  height: 98%;
  margin: 1%;
  /*定义字体、颜色及边框样式*/
  color: white;
  border: none;
  padding: 10px 20px;
  text-align: center;
  text-decoration: none;
  display: inline-block;
  cursor: pointer;

  /*添加渐变背景和圆角*/
  background: linear-gradient(to right, #ff105f, #ffad06);
  border-radius: 8px;

  /*给按钮添加一些过渡动画，让效果更为平滑*/
  transition: all 0.3s ease-out;
}

button:hover {
  /*定义鼠标悬停时的背景和阴影样式*/
  background-position: right;
  box-shadow: 0 0 15px #ff105f;
  color: white;
}

input[type="text"] {
  transition: box-shadow 0.5s ease;
  box-shadow: 1px 1px 3px rgb(255, 255, 255);
}

input[type="text"]:hover {
  box-shadow: 0px 0px 13px rgba(81, 203, 238, 1);
}

input[type="text"],
button {
  font-size: 1.7vw;
}
</style>